/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div class="nav-model">
    <router-link
      :to="{ path: '/home'}"
      tag="div"
      class="logo-box"
    >
      <img
        src="./logo.svg"
        alt=""
        style="height:30px"
      >
    </router-link>
    <div class="line"></div>
    <div class="nav-box">
      <div
        v-auth="['home:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/home'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-shouye"></icon-svg> <span>首页</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['scheduling:list','scheduling:resource:list','scheduling:center:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/scheduler'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-suanlitiaodu"></icon-svg> <span>算力调度</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['projects:list','projects:user:list','projects:common:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/projects'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-xiangmuguanli"></icon-svg> <span>{{$t('Project Manage')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['resource:list','resource:file:list','resource:udf:list','resource:resource:list','resource:func:list','resource:datasource:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/resource'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-ziyuanzhongxin"></icon-svg> <span>{{$t('Resources manage')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['monitor:list','monitor:service:list','monitor:service:master:list','monitor:service:worker:list','monitor:service:DB:list','monitor:statistic:list','monitor:statistic:task:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/monitor'}"
            tag="a"
            active-class="active"
          >
            <icon-svg
              icon-class="icon-jiankongzhongxin"
              style="margin-right: 0;"
            ></icon-svg><span>{{$t('Monitor')}}</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['config:list','config:worker-group:list','system:environments:list','system:token:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/security'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-peizhizhongxin"></icon-svg> <span>配置中心</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['system:list','config:warning-group:list','system:tenant:list','config:warning-instance:list','system:users:list','system:role_permission:list','system:queue:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/system'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-xitongshezhi"></icon-svg> <span>系统管理</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['operation:list','operation:overview:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/operation'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-yunyingzhongxin"></icon-svg> <span>运营中心</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['equipment:list','equipment:route:list','equipment:network:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/equipment'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-suanlizhuce"></icon-svg> <span>算力注册</span><strong></strong>
          </router-link>
        </div>
      </div>
      <div
        v-auth="['csresources:list']"
        class="clearfix list"
      >
        <div class="nav-links">
          <router-link
            :to="{ path: '/cs-resources'}"
            tag="a"
            active-class="active"
          >
            <icon-svg icon-class="icon-chaosuanziyuan"></icon-svg> <span>超算资源</span><strong></strong>
          </router-link>
        </div>
      </div>
    </div>
    <div class="right">
      <el-dropdown @command="_toggleUser">
        <span class="el-dropdown-link">
          <em class="el-icon-user-solid"></em>{{userInfo.userName}}<em class="el-icon-arrow-down"></em>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="user">
            <em class="el-icon-user"></em>
            <span>{{$t('User Information')}}</span>
            <template v-for="(item,i) in statusList">
              <el-tag
                v-if="item.isShow"
                :key="i"
              >{{ item.value }}</el-tag>
            </template>

          </el-dropdown-item>
          <el-dropdown-item command="logout">
            <em class="el-icon-switch-button"></em>
            <span>{{$t('Logout')}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div
      class="file-update-model"
      @click="_toggleArchive"
      v-if="isUpdate"
    >
      <div class="icon-cloud">
        <em class="ans el-icon-upload"></em>
      </div>
      <div class="progress-box">
        <m-progress-bar
          :value="progress"
          text-placement="bottom"
        ></m-progress-bar>
      </div>
    </div>
    <div class="adaptive-m-nav">
      <div class="m-nav-box ">
        <a
          href="javascript:"
          @click="mIsNav = !mIsNav"
        ><em class="ansfont ri-database-2-line"></em></a>
      </div>
      <div class="m-title-box">
        <div class="logo-m"></div>
      </div>
      <div class="m-user-box">
        <a
          href="javascript:"
          @click="_goAccount"
        ><em class="el-icon-user"></em></a>
      </div>
      <transition name="slide-fade">
        <div
          class="m-nav-list"
          v-if="mIsNav"
        >
          <ul @click="mIsNav = false">
            <router-link
              :to="{ path: '/home'}"
              tag="li"
              active-class="active"
            >
              <em class="ansfont ri-home-4-line"></em>
              <span>{{$t('Home')}}</span>
            </router-link>
            <router-link
              :to="{ path: '/projects'}"
              tag="li"
              active-class="active"
            >
              <em class="el-icon-tickets"></em>
              <span>{{$t('Project manage')}}</span>
            </router-link>
            <router-link
              :to="{ path: '/resource'}"
              tag="li"
              active-class="active"
            >
              <em class="el-icon-folder"></em>
              <span>{{$t('Resources manage')}}</span>
            </router-link>
            <router-link
              :to="{ path: '/datasource'}"
              tag="li"
              active-class="active"
            >
              <em class="ansfont ri-database-2-line"></em>
              <span>{{$t('Datasource manage')}}</span>
            </router-link>
            <router-link
              :to="{ path: '/security'}"
              tag="li"
              active-class="active"
              v-ps="['ADMIN_USER']"
            >
              <em class="ansfont ri-shield-check-line"></em>
              <span>{{$t('Security')}}</span>
            </router-link>
          </ul>
        </div>
      </transition>
    </div>

    <el-dialog
      title="导入工作流"
      :visible.sync="definitionUpdateDialog"
      width="auto"
      append-to-body
    >
      <m-definition-update
        :type="type"
        @onProgressDefinition="onProgressDefinition"
        @onUpdateDefinition="onUpdateDefinition"
        @onArchiveDefinition="onArchiveDefinition"
        @closeDefinition="closeDefinition"
      ></m-definition-update>
    </el-dialog>

    <el-dialog
      title="上传文件"
      :visible.sync="fileUpdateDialog"
      width="550px"
      append-to-body
    >
      <m-file-update
        :type="type"
        @onProgressFileUpdate="onProgressFileUpdate"
        @onUpdateFileUpdate="onUpdateFileUpdate"
        @onArchiveDefinition="onArchiveFileUpdate"
        @closeFileUpdate="closeFileUpdate"
      ></m-file-update>
    </el-dialog>

    <el-dialog
      title="上传文件"
      :visible.sync="fileChildUpdateDialog"
      width="auto"
      append-to-body
    >
      <m-file-child-update
        :type="type"
        :id="id"
        @onProgressFileChildUpdate="onProgressFileChildUpdate"
        @onUpdateFileChildUpdate="onUpdateFileChildUpdate"
        @onArchiveFileChildUpdate="onArchiveFileChildUpdate"
        @closeFileChildUpdate="closeFileChildUpdate"
      >
      </m-file-child-update>
    </el-dialog>

    <el-dialog
      title="上传文件"
      :visible.sync="resourceChildUpdateDialog"
      width="auto"
      append-to-body
    >
      <m-resource-child-update
        :type="type"
        :id="id"
        @onProgressResourceChildUpdate="onProgressResourceChildUpdate"
        @onUpdateResourceChildUpdate="onUpdateResourceChildUpdate"
        @onArchiveFileChildUpdate="onArchiveResourceChildUpdate"
        @closeResourceChildUpdate="closeResourceChildUpdate"
      ></m-resource-child-update>
    </el-dialog>

    <el-dialog
      title="重新上传文件"
      :visible.sync="fileUploadDialog"
      width="auto"
      append-to-body
    >
      <m-file-upload
        :originalFileData="originalFileData"
        @onUploadFile="onUploadFile"
        @closeFileUpload="closeFileUpload"
      >
      </m-file-upload>
    </el-dialog>
  </div>
</template>
<script>
  import _ from 'lodash'
  import cookies from 'js-cookie'
  import { mapState, mapActions } from 'vuex'
  import { findComponentDownward } from '@/module/util/'
  import mFileUpdate from '@/module/components/fileUpdate/fileUpdate'
  import mFileChildUpdate from '@/module/components/fileUpdate/fileChildUpdate'
  import mResourceChildUpdate from '@/module/components/fileUpdate/resourceChildUpdate'
  import mDefinitionUpdate from '@/module/components/fileUpdate/definitionUpdate'
  import mFileUpload from '@/module/components/fileUpdate/fileReUpload'
  import mProgressBar from '@/module/components/progressBar/progressBar'
  import { findLocale, localeList } from '@/module/i18n/config'

  export default {
    name: 'roof-nav',
    data () {
      const statusList = [
        {
          key: 0,
          value: '待认证',
          color: '#df1a1a',
          isShow: false
        },
        {
          key: 1,
          value: '认证审核中',
          color: '#bbbbbb',
          isShow: false
        },
        {
          key: 2,
          value: '√ 个人认证',
          color: '#109811',
          isShow: false
        },
        {
          key: 3,
          value: '√ 企业认证',
          color: '#109811',
          isShow: false
        },
      ]
      return {
        // Whether to drag
        isDrag: false,
        // Upload progress
        progress: 0,
        // Whether to upload
        isUpdate: false,
        // Whether to log in
        isLogin: false,
        // Mobile compatible navigation
        mIsNav: false,
        // Take the language list data to get rid of the language pack
        localeList: _.map(_.cloneDeep(localeList()), v => _.omit(v, ['locale'])),
        // Selected language
        activeLocale: '',
        // Environmental variable
        docLink: '',
        type: '',
        definitionUpdateDialog: false,
        fileUpdateDialog: false,
        fileChildUpdateDialog: false,
        id: null,
        fileName: '',
        description: '',
        originalFileData: {},
        resourceChildUpdateDialog: false,
        fileUploadDialog: false,
        permission: '',
        statusList
      }
    },
    watch: {
      isAuth: {
        handler: function (v) {
          // this.statusList.forEach(item=>{
          //   item
          // })
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      ...mapActions('user', ['signOut']),
      /**
       * User Info
       */
      _goAccount () {
        this.isLogin = false
        this.$router.push({ name: 'account' })
      },
      /**
       * _toggle User
       */
      _toggleUser (command) {
        if (command === 'user') {
          this._goAccount()
        } else {
          this._signOut()
        }
      },
      /**
       * Upload (for the time being)
       */
      _fileUpdate (type) {
        if (this.progress) {
          this._toggleArchive()
          return
        }
        this.type = type
        if (this.type === 'DEFINITION') {
          this.definitionUpdateDialog = true
        } else {
          this.fileUpdateDialog = true
        }
      },
      onProgressDefinition (val) {
        this.progress = val
      },
      onUpdateDefinition () {
        let self = this
        findComponentDownward(self.$root, 'definition-list-index')._updateList()
        this.isUpdate = false
        this.progress = 0
        this.definitionUpdateDialog = false
      },
      onArchiveDefinition () {
        this.isUpdate = true
      },
      closeDefinition () {
        this.progress = 0
        this.definitionUpdateDialog = false
      },
      onProgressFileUpdate (val) {
        this.progress = val
      },
      onUpdateFileUpdate () {
        let self = this
        findComponentDownward(self.$root, `resource-list-index-${this.type}`)._updateList()
        this.isUpdate = false
        this.progress = 0
        this.fileUpdateDialog = false
      },
      onUploadFile () {
        let self = this
        findComponentDownward(self.$root, 'resource-list-index-FILE')._updateList()
        this.isUpdate = false
        this.progress = 0
        this.fileUploadDialog = false
      },
      closeFileUpload () {
        this.progress = 0
        this.fileUploadDialog = false
      },
      onArchiveFileUpdate () {
        this.isUpdate = true
      },
      closeFileUpdate () {
        this.progress = 0
        this.fileUpdateDialog = false
      },
      _fileChildUpdate (type, data) {
        if (this.progress) {
          this._toggleArchive()
          return
        }
        this.type = type
        this.id = data
        this.fileChildUpdateDialog = true
      },
      _fileReUpload (item) {
        if (this.progress) {
          this._toggleArchive()
          return
        }
        this.originalFileData = item
        this.fileUploadDialog = true
      },
      onProgressFileChildUpdate (val) {
        this.progress = val
      },
      onUpdateFileChildUpdate () {
        let self = this
        findComponentDownward(self.$root, `resource-list-index-${this.type}`)._updateList()
        this.isUpdate = false
        this.progress = 0
        this.fileChildUpdateDialog = false
      },

      onArchiveFileChildUpdate () {
        this.isUpdate = true
      },

      closeFileChildUpdate () {
        this.progress = 0
        this.fileChildUpdateDialog = false
      },
      _resourceChildUpdate (type, data) {
        if (this.progress) {
          this._toggleArchive()
          return
        }
        this.type = type
        this.id = data
        this.resourceChildUpdateDialog = true
      },
      onProgressResourceChildUpdate (val) {
        this.progress = val
      },
      onUpdateResourceChildUpdate () {
        let self = this
        findComponentDownward(self.$root, `resource-list-index-${this.type}`)._updateList()
        this.isUpdate = false
        this.progress = 0
        this.resourceChildUpdateDialog = false
      },
      onArchiveResourceChildUpdate () {
        this.isUpdate = true
      },
      closeResourceChildUpdate () {
        this.progress = 0
        this.resourceChildUpdateDialog = false
      },
      /**
       * Upload popup layer display
       */
      _toggleArchive () {
        $('.update-file-modal').show()
      },
      /**
       * sign out
       */
      _signOut () {
        this.signOut()
      },
      /**
       * Language switching
       */
      _toggleLanguage (language) {
        cookies.set('language', language, { path: '/' })
        setTimeout(() => {
          window.location.reload()
        }, 100)
      }
    },
    created () {
      let language = cookies.get('language')
      this.activeLocale = language ? findLocale(language) : '中文'
      this.docLink = process.env.NODE_ENV === 'true' ? 'docs' : `/view/docs/zh_CN/_book` // eslint-disable-line
    },
    mounted () {
    },
    computed: {
      ...mapState('user', ['userInfo', 'isAuth'])
    },
    components: { mFileUpdate, mProgressBar, mDefinitionUpdate, mFileChildUpdate, mResourceChildUpdate, mFileUpload }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.nav-model {
  height: 60px;
  position: relative;
  .m-title-box {
    text-align: center;
    .logo-m {
      width: 36px;
      height: 36px;
      margin: 0 auto;
      position: relative;
      top: 12px;
    }
  }
  .el-dropdown {
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
    line-height: 60px;
    margin-right: 25px;
  }
  .logo-box {
    position: absolute;
    left: 10px;
    top: 12px;
    cursor: pointer;
    > a {
      width: 180px;
      height: 60px;
      display: block;
      background: url('./logo.png') no-repeat;
    }
  }
  .line {
    position: absolute;
    left: 10px;
    top: 18px;
    width: 1px;
    height: 24px;
    opacity: 0.5;
    left: 240px;
    background: #ffffff;
  }
  .nav-box {
    height: 60px;
    line-height: 60px;
    position: absolute;
    left: 280px;
    top: 0;
    .list {
      float: left;
      position: relative;
      cursor: pointer;
      margin-right: 14px;
      .nav-links {
        height: 60px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
        a {
          position: relative;
          text-decoration: none;
          font-size: 20px;
          color: #ffffff !important;
          display: inline-block;
          text-align: center;
          margin: 0px 5px;
          svg {
            margin-right: -7px;
          }
          &.active {
            transform: translateY(-6px);
            transition: transform 0.5s;
            span {
              color: #ffffff;
              i {
                color: #ffffff;
              }
            }
            b {
              height: 2px;
              background: #ffffff;
              display: block;
              margin-top: -2px;
            }
            &::after {
              position: absolute;
              content: ' ';
              bottom: 10px;
              left: 50%;
              width: 20px;
              height: 2px;
              background: #ffffff;
              border-radius: 1px;
            }
          }
        }
      }
    }
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    .ans-poptip {
      min-width: 120px;
    }
    > .lang {
      .ans-poptip {
        min-width: 80px;
      }
    }
    > .docs {
      padding-right: 20px;
      a {
        color: #fff;
        font-size: 14px;
        vertical-align: middle;
        &:hover {
          color: #2d8bf0;
        }
      }
    }
    .current-project {
      height: 60px;
      line-height: 56px;
      display: inline-block;
      margin-right: 16px;
      cursor: pointer;
      i {
        font-size: 18px;
        vertical-align: middle;
        &:nth-child(1) {
          font-size: 20px;
          color: #2d8cf0;
        }
      }
      span {
        color: #333;
        vertical-align: middle;
        font-size: 14px;
      }
      &:hover {
        span {
          color: #2d8cf0;
        }
      }
    }
    .login-model {
      display: inline-block;
      margin-right: 20px;
      cursor: pointer;
      margin-top: 16px;
      em {
        font-size: 18px;
        vertical-align: middle;
        color: #fff;
      }
      span {
        color: #fff;
        vertical-align: middle;
        font-size: 14px;
      }
      &:hover {
        > i,
        > span {
          color: #2d8cf0;
        }
      }
    }
    .lrns-list {
      margin: -6px 0;
      a {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        &:hover {
          i,
          span {
            color: #2d8cf0;
          }
        }
      }
    }
  }
  .file-update-model {
    cursor: pointer;
    .progress-box {
      width: 240px;
    }
    .icon-cloud {
      position: absolute;
      left: -34px;
      top: 2px;
      > i {
        font-size: 22px;
        color: #2d8cf0;
      }
    }
  }
}
</style>
